<template>
        <div class="store">
            <div class="storewelfare" v-show="storeWelfare.length > 0">
                <h4><em>门店福利</em> <p class="fr">附近福利门店<br/><strong>{{storeName}}</strong></p></h4>
                <ul>
                    <li v-for="(item, index) in storeWelfare" v-if="item.timeStatus==0">
                        <div class="box pr" :class="{disable:item.status==3,geticket:item.status==4}">
                            <div class="flex first middle-left ">
                                <div class="tips">今日{{item.startTime}}</div>
                                <div class="price">{{item.desc}}<em>元</em></div>
                            </div>
                            <div class="flex second">
                                <h5 class="ellipsis">{{item.prizeName}}</h5>
                                <p class="red">今日限量领取{{item.everydayNum}}张</p>
                                <p>{{item.conpouDescription}}</p>
                            </div>
                            <div class="flex three middle-right" v-if="item.timeStatus==0">
                                <span class="btn" v-show="item.status==1" :ca="item.prizeName | addCa('0')"  @click='getTicket(item.prizeCode,index,0,item.storeId)'>去领取</span>
                                <span class="btn gray willstart" v-if="item.status==2">未开抢</span>
                                <span class="btn gray end" v-if="item.status==3">已抢光</span>
                                <a class="btn gray check" v-show="item.status==4" :ca="item.prizeName | addCa('1')" :href="myCenterUrl">去查看</a>                                
                            </div>

                        </div>
                        <div class="address">
                            <i class="icon-map"></i>仅限{{item.storeName}}使用
                        </div>
                    </li>

                    <li style="background:none;" v-if="isShow">
                        <h5 class="tomorry">明日门店福利</h5>
                    </li>
                    <li v-for="(item, index) in storeWelfare" v-if="item.timeStatus!=0">
                        <input type="hidden" v-model="isShow" v-if="index==1" :value="item.status">
                        <div class="box pr" :class="{disable:item.status==3,geticket:item.status==4}">
                            <div class="flex first middle-left ">
                                <div class="tips">明日{{item.startTime}}</div>
                                <div class="price">{{item.desc}}<em>元</em></div>
                            </div>
                            <div class="flex second">
                                <h5 class="ellipsis">{{item.prizeName}}</h5>
                                <p class="red">明日限量领取{{item.everydayNum}}张</p>
                                <p>{{item.conpouDescription}}</p>
                            </div>

                            <div class="flex middle-right">
                                <span class="btn gray willstart">未开抢</span>
<!--                                 <span class="btn gray">明日{{item.startTime}}开抢</span> -->
                             
                            </div>
                        </div>
                        <div class="address">
                            <i class="icon-map"></i>仅限{{item.storeName}}使用
                        </div>
                    </li>

                </ul> 
            </div>

            <div class="everyDay" v-show="everyDayWelfare.length>0">
                <h4><em>每日福利</em></h4>
                <ul>
                    <li  v-for="(item, index) in everyDayWelfare">
                        <div class="box pr" :class="{disable:item.status==3,geticket:item.status==4}">
                            <div class="flex first middle-left">
                                <div class="tips">今日{{item.startTime}}</div>
                                <div class="price">{{item.desc || 0}}<em>元</em></div>
                            </div>
                            <div class="flex second">
                                <h5 class="ellipsis">{{item.prizeName}}</h5>
                                <p class="red">今日限量领取{{item.everydayNum}}张</p>
                                <p>{{item.conpouDescription}}</p>
                            </div>
                            <div class="flex three middle-right">
                                <span class="btn" v-show="item.status==1" :ca="item.prizeName | addCa('0')" @click='getTicket(item.prizeCode,index,1,"")'>去领取</span>
                                <span class="btn gray willstart" v-if="item.status==2">未开抢</span>
                                <span class="btn gray end" v-if="item.status==3">已抢光</span>
                                <a class="btn gray check" :href="myCenterUrl" :ca="item.prizeName | addCa('1')" v-show="item.status==4">去查看</a>

                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

</template>

<script>
    
    import common from "../../assets/js/common.js";
    import {Toast} from 'mint-ui';
    export default {
        data(){
            return {
                currentCity: '',
                locationCity: '',
                longitude: '',
                latitude: '',
                storeName:'',
                myCenterUrl:'',
                isShow:false
            };
        },
        watch:{
            'everyDayWelfare':function(){
                var _this = this;
                //this.everyDayWelfare[0].status = 4;
                // _this.everyDayWelfare[1].remainTime = 15;
                //var setIntervalObj = [];


                // for(var i=0, len = _this.everyDayWelfare.length; i<len; i++){
                //     console.info(_this.everyDayWelfare[i].remainTime);

                //     //进入后台后的数据记录
                //     var lastTime = +new Date;                
                //     setInterval(function() {
                //         if(Math.abs(+new Date - lastTime) > 3000) {
                //             _this.everyDayWelfare[i].remainTime = _this.everyDayWelfare[i].remainTime - parseInt(Math.abs(+new Date - lastTime)/1000);
                //         }
                //         lastTime = +new Date;
                //     }, 1000);

                //     //倒计
                //     if(_this.everyDayWelfare[i].remainTime>=0){
                //         setIntervalObj[i] = setInterval(function(i){
                //             _this.everyDayWelfare[i].remainTime = _this.everyDayWelfare[i].remainTime - 1;
                //             if( _this.everyDayWelfare[i].remainTime <=0 && _this.everyDayWelfare[i].quota >0 ){
                //                 _this.everyDayWelfare[i].status = 1;
                //                 clearInterval(setIntervalObj[i]);
                //             }
                //         },1000,i)
                //     }
                // }
                this.countDown(this.everyDayWelfare,'everyDayWelfare');


            },
            'storeWelfare': function(){                
                if(this.storeWelfare.length > 0){
                    this.storeName = this.storeWelfare[0].storeName;
                    for(var i=0, len=this.storeWelfare.length; i<len; i++){
                        if(this.storeWelfare[i].timeStatus !=0){
                            this.isShow = true;
                            break;
                        }
                    }
                    this.countDown(this.storeWelfare,'storeWelfare'); 
                }
           
            }
        },
        mounted(){            
            var env = process.env.NODE_ENV;
            console.info('isShow:'+this.isShow);
            /*var urlMap = {
                'prod':'//member.chexiang.com/m/coupon.htm',
                'pre':'//member.chexiangpre.com/m/coupon.htm',
                'sit':'//member.chexiangsit.com/m/coupon.htm'
            }*/
           
           //个人中心券列表
            var urlMap = {
                'prod':'//cxjapp.chexiang.com/service/usercoupon/getUserCouponList/1?couponType=1&userId=',
                'pre':'//cxjapp.chexiangpre.com/service/usercoupon/getUserCouponList/1?couponType=1&userId=',
                'sit':'//cxjapp.chexiangsit.com/service/usercoupon/getUserCouponList/1?couponType=1&userId='
            };
            this.myCenterUrl = urlMap[env]||urlMap['prod'];
            //common.ANA_AnalyticsScan();
        },
        props: {
          everyDayWelfare: Array,
          storeWelfare: Array
        },
        updated(){
            console.info(11);
            //common.ANA_AnalyticsScan();  
        },
        methods:{
            getParam(){
                var tar = url.parse(window.location.href).query,tmpObj = qs.parse(tar);
                return tmpObj;
            },
            parseData: function(data) {
                var _data;
                if (!data) return data;
                try{
                    _data = JSON.parse(data);
                }catch(e){
                    _data = data;
                }
                return _data;
            },
            getTicket: function(code,index,actFlag,storeId){
                var _this = this;
                this.$http.post(common.isdev() + '/daily/receive.htm', {
                    "prizeCode": code,
                    "actFlag": actFlag,//城市券1   门店券 0
                    "storeId": storeId,
                    "currentUrl": window.location.href
                }).then(function(d) {
                   var data = _this.parseData(d.data);
                   if(data.result == -99){
                        window.location.href = data.msg;
                   }else if(data.result == 0){                        
                        var msg = {
                            '0001':'参数错误',
                            '0002':'当前城市和定位城市不一致',
                            '0003':'定位服务未开启',
                            '0004':'系统异常，未找到该商品',
                            '0005':'今日已抢兑过商品，不能重复抢购',
                            '0006':'尚未开抢',
                            '0007':'抱歉，券已抢光，下次请赶早',
                            '0008':'抱歉，券已抢光',
                            '0009':'抱歉，领取失败，请稍后再试',
                            '0010':'领取失败，请稍后再试',
                            '0011':'系统繁忙，请稍后再试'
                        } 
                        Toast(msg[data.errorCode]);
                        if(data.errorCode  == '0008'){
                            setTimeout(function(){
                                document.location.reload();
                            },2000);                            
                        }
                   }else{
                        if(actFlag == 1){
                             _this.everyDayWelfare[index].status = 4;
                             Toast('恭喜您领取成功');
                        }else{
                            _this.storeWelfare[index].status = 4;
                            Toast('恭喜您领取成功');
                        }
                   }                   

                }, function(err){
                    Toast('网络异常,请稍后再试');
                });
            },
            countDown: function(data,type){
                var _this = this;
                var setIntervalObj = [];                
                for(var i=0, len = _this[type].length; i<len; i++){

                    // //进入后台后的数据记录
                    var lastTime = +new Date;                
                    setInterval(function() {
                        if(Math.abs(+new Date - lastTime) > 3000) {
                            _this[type][i].remainTime = _this[type][i].remainTime - parseInt(Math.abs(+new Date - lastTime)/1000);
                        }
                        lastTime = +new Date;
                    }, 1000);
                    console.info(_this[type][i].remainTime);
                    // //倒计
                    if(_this[type][i].remainTime > 0){
                        setInterval(function(i){
                            //console.info(_this[type][i].remainTime);
                            _this[type][i].remainTime = _this[type][i].remainTime - 1;
                            if( _this[type][i].remainTime < 0 && _this[type][i].quota >0 ){
                                _this[type][i].status = 1;
                                //clearInterval(setIntervalObj[type][i]);
                            }
                        },1000,i)
                    }
                }
            }//countDown end
        }
    }
</script>
<style lang="scss" scoped> 
@import '../../assets/css/common.scss';    
@function rem($px){
  @return $px / 10 * 1rem;
}
html,body{
    height:100%;
}
body {
    background: #f4f4f4;
}
.red{
    color:red;
}
.store{
    padding:rem(17) rem(10) rem(1);
    font-size:rem(13);
    .tomorry{
        margin-bottom:rem(10);
        color:#999;
    }
    h4{
        padding-bottom:rem(17);
        color:#243742;

        em{
            font-size:rem(18);
            font-weight:bold;
        }
        p{
            line-height:1.2;
            text-align:right;
            color:#999;
            font-size:rem(13);
            strong{
                font-size:rem(15);
                color:#243742;
            }
        }
    }
    ul{
        margin-bottom:rem(26);
    }
    ul li{
        background:#fff;
        border-radius:rem(8);
        margin-bottom:rem(10);
    }
    .address{
        border-top:1px solid #e7e7e7;
        padding:rem(10);
        color:#9c9c9c;

    }
    .box{
    	position: relative;
        display: -webkit-flex;
        flex-flow:row nowrap;
        justify-content: flex-start;
        align-items:center;
        padding:rem(15) 0;
        font-size:rem(13);
        .first{
            border-right:1px dashed #ebebeb;
            width:rem(75);
        }
        .second{
        	margin-left: rem(75);
            width:rem(165);
            padding-left:rem(10);
            h5{
                font-size:rem(15);
                margin-bottom:rem(4);
                height:rem(20);
                overflow:hidden;
            }
            p:last-child{
                color:#9c9c9c;
            }
        }
        .three{
            text-align:right;
            width:rem(104);
        }
        .middle-left {
        	position: absolute;
        	top: 50%;
        	left: 0;
        	transform:translate(0, -50%);
        	-webkit-transform:translate(0, -50%);
        }
        .middle-right {
        	position: absolute;
        	top: 50%;
        	right: 1rem;
        	transform:translate(0, -50%);
        	-webkit-transform:translate(0, -50%);
        }
        .tips{
            width:rem(52);
            height:rem(15);
            background:#f12626;
            font-size:rem(10);
            color:#fff;
            text-align:center;
            line-height:rem(17);
        }
        .price{
            padding-left:rem(10);
            font-size:rem(28);
            color:#f12626;
            em{
                font-size:rem(12);
            }

        }
        .btn{
            display:inline-block;
            min-width:rem(39);
            padding:0 rem(8);
            height:rem(30);
            background:#f12626;
            text-align:center;
            line-height:rem(32);
            border-radius:rem(4);
            color:#fff;
            font-size:rem(13);
            // position: absolute;
            // right:rem(15);
            // top:50%;
            // transform:translateY(-50%);

        }
        .btn.gray{
            background:#fff;
            color:#999;
            border:1px solid #dadada;
        }
        .btn.willstart{
            border:none;
        }
        .btn.end{
            background:#dadada;
            color:#fff;
        }
        .btn.check{
            border-color:#999;
            color:#666;
        }
    }

    ul{
        .box.disable{
            .tips{
                background:#999;
            }
            .price,.second,.second .red{
                color:#999;
            }
        }
        .box.geticket{
            background: url(../../assets/image/geticket@2x.png) no-repeat right top;
            background-size:rem(49) rem(39);
        }
    }
	.ellipsis {
		white-space: nowrap;  
        overflow: hidden;  
        text-overflow: ellipsis;  
	}

}
</style>